<template>
    <BaseChartVue :options="chartData" :width="width" :height="height"></BaseChartVue>
  
</template>

<script>
import axios from 'axios'
import BaseChartVue from '../BaseChart.vue'
import {oderSearch} from "@/api/user";
export default {
    components: {
        BaseChartVue
    },
    data(){
        return{
            condition: {
                oderid: null,
                startTime:'',
                finishTime:'',
                orderUser:'',
                orderAdmin:'',
                status:0,
                page:1,
                limit:1000,
            },
            condition1: {
                oderid: null,
                startTime:'',
                finishTime:'',
                orderUser:'',
                orderAdmin:'',
                status:1,
                page:1,
                limit:1000,
            },
            condition2: {
                oderid: null,
                startTime:'',
                finishTime:'',
                orderUser:'',
                orderAdmin:'',
                status:2,
                page:1,
                limit:1000,
            },
            width: '100%',
            height: '100%',
            chartData:{
                grid: {
                    left: '0%',
                    right: '2%',
                    top:'20%',
                    bottom: '0%',
                    containLabel: true
                },
                dataset:{
                    source:[
                        ['order','value'],
                        // ['待审核', 1],
                        // ['进行中', 9],
                        // ['已处理', 7],
                    ]
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    type: 'bar',
                    encode: {
                        x: 'deportname',
                        y: 'value'
                    },
                    barWidth: '40%',
                    //给每列添加颜色
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                var colorList = [
                                    '#FCCE10','#E87C25','#27727B',
                                    '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                    '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                ];
                                return colorList[params.dataIndex]
                            }
                        }
                    },

                    },
                    
                ]
        }
    }
    },
    mounted(){
        //获取数据
        this.search();
    },
    methods:{
        //获取数据
        search(){
            oderSearch(
                this.condition,
            ).then((res)=>{
                this.chartData.dataset.source.push(['已完成',res.count]);

            })
            oderSearch(
                this.condition1,
            ).then((res)=>{
                this.chartData.dataset.source.push(['进行中',res.count]);

            })
            oderSearch(
                this.condition2,
            ).then((res)=>{
                this.chartData.dataset.source.push(['待审核',res.count]);

            })
        },
    },

}
</script>

<style>

</style>